<template>
  <div class="softClass">
    <Transfer
        :data="notSelected"
        :target-keys="selected"
        :render-format="render"
        @on-change="handleChange"
        :titles="[$t('module.applicationSync.noSync'),$t('module.applicationSync.isSync')]"
        ></Transfer>
  </div>
</template>
<script>
import locales from "./locales.js";
import { getUserSofts, postPevelopUserAuth } from "@/api/orgApi";
export default {
  mixins: [locales],
  props: {
    userId: {
      type: String,
      default() {
        return "";
      }
    },
    roleCode: {
      type: String,
      default() {
        return "";
      }
    },
    userName: {
      type: String,
      default() {
        return "";
      }
    },
    id: {
      type: String,
      default() {
        return "";
      }
    },
  },
  data() {
    return {
        notSelected: [],
        selected: [],
        from: {},
        actions: [
          {
            text: this.$t('module.applicationSync.save'),
            theme: "primary",
            disabled: true,
            handle: () => {
              this.save();
            },
            loading: false
          },
          {
            text: this.$t('module.applicationSync.close'),
            handle: () => {
              this.$emit("Close");
            }
          }
        ]
    };
  },
  computed: {
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.$emit("SetTitle", this.$t('module.applicationSync.title'));
      this.$emit("SetPageWidth", 800);
      this.$emit("SetPageActions", this.actions);
      this.getUserApp()
    },
    getUserApp() {
      getUserSofts({userId: this.userId}).then(res => {
        this.notSelected = [...res.data.notSelected, ...res.data.selected]
        this.selected = res.data.selected
        this.getdata()
      })
    },
    getdata (){
			let a = []
			let b= []
      this.notSelected.forEach(e => {
        a.push({
          key: e.id,
          label: e.name
        })
      })
      this.selected.forEach(e => {
        b.push(e.id)
      })
			this.notSelected = a
      this.selected = b
		},
    render (item) {
          return item.label;
      },
    handleChange (newTargetKeys, direction, moveKeys) {
          this.selected = newTargetKeys;
          const from = {
            apps: newTargetKeys.length > 0 ? newTargetKeys : null,
            id: this.id,
            userId: this.userId,
            userName: this.userName,
            roleCode: 'developer',
          }
          this.from = from
          this.actions[0].disabled = false
      },
    save() {
      this.actions[0].loading = true
      postPevelopUserAuth(this.from).then(res => {
        this.$message.success({
          content: this.$t("module.applicationSync.success.syncSuccess"),
          duration: 3
        });
        this.actions[0].loading = false
        this.$emit("Close", true);
      })
    }
  },
  watch: {},
  directives: {}
};
</script>
<style lang="less" scoped>
.softClass {
  display: flex;
  justify-content: center;
}
/deep/.ivu-transfer-list-body {
  border-radius: 0;
}
/deep/.ivu-transfer-list-header {
  border-radius: 0;
}
/deep/.ivu-transfer-list {
  width: 290px;
  height: 410px;
}
</style>